<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="活动主题" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="ruleForm.contacts"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报名上限(人)" prop="sign_up">
            <el-input-number style="width: 100%" v-model="ruleForm.sign_up" :step="5" :min="10" :max="2000"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动类型" prop="type_id">
            <el-select style="width: 100%" v-model="ruleForm.type_id" placeholder="请选择">
              <el-option v-for="(item, index) in activityType" :key="index" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input required v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="签到范围(米)" prop="sign_in">
            <el-input-number style="width: 100%" v-model="ruleForm.sign_in" :step="100" :min="100" :max="10000"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地址" prop="address">
        <el-row>
          <el-col :span="23">
            <el-input v-model="ruleForm.address" placeholder="请点击右边图标选择地图" disabled autocomplete="off"></el-input>
          </el-col>
          <el-col :span="1">
            <span style="font-size: 22px; margin-left: 10px; cursor: pointer" class="el-icon-location-outline" @click="selectAddress"></span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="详细地址" prop="email">
        <el-input v-model="ruleForm.address_desc"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动时间" prop="startAndEndTime">
            <el-date-picker v-model="ruleForm.startAndEndTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="活动概述" prop="synopsis">
        <el-input type="textarea" v-model="ruleForm.synopsis"></el-input>
      </el-form-item>
      <el-form-item label="活动封面" prop="avatar">
        <el-upload class="avatar-uploader" :action="this.$upload" :on-error="uploadFileError" :on-success="uploadFileSuccess" :show-file-list="false">
          <img v-if="ruleForm.avatar != ''" :src="ruleForm.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="onSubmit('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>

    <!-- 选择地址弹框-->
    <el-dialog append-to-body style="margin-bottom: 10px" top="10px" :visible.sync="mapDialogVisible" title="选择详细地址" width="80%">
      <b-map class="map-box" :longitude="ruleForm.log" :latitude="ruleForm.lat" :address="ruleForm.address" @getAddress="getAddress"></b-map>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="mapDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddress"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import BMap from '../../components/BMap.vue'
import { getList } from '@/api/activityTypeApi.js'
export default {
  components: { BMap },
  data() {
    //邮箱验证
    var emailRule = (rule, value, callback) => {
      let patt = new RegExp('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$')
      if (!patt.test(value) && value != '') {
        callback(new Error('邮箱格式不对,请重新输入'))
      } else {
        callback()
      }
    }
    //手机号验证
    var phoneRule = (rule, value, cb) => {
      let patt = new RegExp('^1[3-9]\\d{9}$')
      if (!patt.test(value)) {
        cb(new Error('手机号格式不对，请重新输入'))
      } else {
        cb()
      }
    }
    return {
      addressInfoObj: {},
      mapDialogVisible: false,
      currentAddress: '',
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
        ],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        sign_up: [{ required: true, message: '设置活动报名上限人数', trigger: 'blur' }],
        type_id: [{ type: 'array', required: true, message: '请选择活动类型', trigger: 'change' }],
        email: [{ validator: emailRule, trigger: 'blur' }],
        address: [{ required: true, message: '请选择活动地址', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: phoneRule, trigger: 'blur' },
        ],
        startAndEndTime: [{ type: 'date', required: true, message: '请选择活动时间', trigger: 'change' }],
        synopsis: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
      },
      activityType: [],
    }
  },
  props: ['ruleForm'],
  created() {
    getList().then((res) => {
      this.activityType = res.data.data
    })
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //格式化时间
          this.ruleForm.start_time = this.$moment(this.ruleForm.startAndEndTime[0]).format('YYYY-MM-DD HH:mm:ss')
          this.ruleForm.end_time = this.$moment(this.ruleForm.startAndEndTime[1]).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('submit', this.ruleForm)
        } else {
          this.$message.warning('请按表单要求填写完整！！！')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //图片上传成功
    uploadFileSuccess(res) {
      this.ruleForm.avatar = res.data.url
      this.$emit('updateProps', this.ruleForm)
    },
    selectAddress() {
      this.mapDialogVisible = true
    },
    //选择地图确定按钮
    handleAddress() {
      this.ruleForm.address = this.currentAddress
      this.mapDialogVisible = false
    },
    getAddress(address) {
      this.currentAddress = address
    },
    //图片上传失败
    uploadFileError(err) {
      console.log(err)
    },
  },
}
</script>

<style lang="less" scoped>
.avatar {
  object-fit: cover;
}
</style>